import React from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.querySelector("#root"));

const fn1 = () => {
  console.log("fn1");
};
// JSX 规则1：有且只能有一个根元素
// JSX 规则2：多行时需要使用小括号包裹
// JSX 规则3：必须正确的闭合元素
// JSX 规则4：使用驼峰式命名法给 所有 大部分属性命名！
//            class   =>  className
//            for     =>  htmlFor
//            onclick =>  onClick
//            style   =>  对象形式   {{}}
//                        属性名需要换成 驼峰式   font-size => fontSize
// JSX 规则5：要让解析html元素的话，需要使用 dangerouslySetInnerHTML
//            类似 v-html 的操作
//            要只读信任的数据做此操作，避免 XSS 攻击。
// JSX 规则6: 组件必须使用大驼峰语法
// JSX 规则7: 使用JS表达式，通过单花括号
//            1. 用在标签内部    <div> {js表达式} </div>
//            2. 用在属性的值    <div title={js表达式} ></div>
//            3. PS 不用将 标签名用 插值语法来玩
//                        <{tag}></{tag}>  ×
// JSX 规则8: 布尔类型、Null 以及 Undefined 将会忽略

const str = `<button>后端返回的</button>`;

// 创建一个组件，
//    PS：组件的创建非常简单，提供一个返回 JSX 内容的 大驼峰命名的函数即可。
function App() {
  return (
    <div>
      <h1>App</h1>
    </div>
  );
}

const vNode = (
  <div>
    <div>{undefined}</div>

    <hr />
    <div style={{ color: "red", fontSize: "18px" }}>我的天</div>
    <hr />
    <div className="box">我的地</div>

    <label htmlFor="input">用户名</label>
    <input id="input" type="text" />

    <button onClick={fn1}>按钮</button>
    <hr />

    <div>{str}</div>
    <hr />
    <div dangerouslySetInnerHTML={{ __html: str }}></div>

    <hr />
    <App />
  </div>
);

root.render(vNode);
